<template>
  <Button :type="prop.type" :ghost="prop.ghost" :size="prop.size" @click="prop.click">{{ prop.text }} </Button>
</template>
<script setup lang="ts">
import { isRef, ref, Ref } from "vue";
import type { ButtonComp, IData, IProps } from "./class";
import type { KeyAndVal } from "@/core/types/utils";

type Props = {
  instance: ButtonComp;
};

const props = defineProps<Props>();
const data = props.instance.getData();
const prop = ref(props.instance.getProps());
console.log(isRef(prop));
console.log(isRef(data));

const setProps = (val: IProps) => {
  prop.value.text = val.text;
};

const getData = (): IData => {
  return data;
};

props.instance.setProps = setProps;
props.instance.getData = getData;

defineExpose({ setProps, getData });
</script>
<style lang="scss" scoped></style>
